<template>
  <view class="content">
    <view class="for-view">
      <view class="for-item" v-for="(item,index) in list" :key="index">
        <view class="img">
          <uv-image shape="square" radius="5px" fade
                    lazyLoad width="154rpx" height="120rpx" :src="item.productPicture"></uv-image>
        </view>

        <view class="item-info">
          <view class="commodity-and-number">
            <view class="commodity-name">
              <uv-text :text="`${item.commodityName} /  ${item.unit}`"></uv-text>
            </view>
            <view class="number-box" style="margin-left: auto;">
              <!-- 按钮自定义 -->
              <uv-number-box v-model="item.number" :showMinus="item.number!==1" :min="1" @change="valChange">
                <template v-slot:minus>
                  <view class="minus">
                    <uv-icon name="minus" size="12">
                    </uv-icon>
                  </view>
                </template>
                <template v-slot:input>
                  <input class="input" type="number" v-model="item.number" @change="handleBlur(item)"/>
                </template>
                <template v-slot:plus>
                  <view class="plus">
                    <uv-icon name="plus" color="#FFFFFF" size="12">
                    </uv-icon>
                  </view>
                </template>
              </uv-number-box>
            </view>
          </view>

          <view class="remark-add-del">
            <input class="remark" placeholder=" 单品备注" v-model="item.remark"/>
            <view class="del">
              <!-- <uv-text type="error" text="移除" align="right"></uv-text> -->
            </view>
          </view>

        </view>
      </view>
    </view>
    <!--
       <view class="remark-view">
          <textarea class="textarea" v-model="remark" placeholder=" 整单备注..."></textarea>
        </view> -->
    <view class="" style="height: 180rpx;">

    </view>
    <view class="bottom">
      <view class="button" @click="submit()">
        提交
      </view>
    </view>
    <!-- 提交确认框 -->
    <uv-modal ref="modal" title="提交" content='请仔细核对物品清单,确认提交？' showCancelButton
              @confirm="confirm"></uv-modal>

  </view>
</template>

<script>
import CommodityAPI from '@/api/commodity'
import {
  showToast
} from '@/utils/media';
import debounce from "@climblee/uv-ui/libs/function/debounce";

export default {
  data() {
    return {
      list: [],
      areaId: '',
      areaName: '',
      remark: ''
    };
  },
  onLoad() {
    this.list = uni.getStorageSync('chooseList')
  },
  methods: {
    valChange(e) {
      console.log('当前值为: ' + e.value)
    },
    handleBlur(item) {
      console.log(item)
      if (item.number < 1) {
        item.number = 1
      }
    },
    submit() {
      this.$refs.modal.open();
    },

    confirm() {
      debounce(() => {
        this.list = this.list.map(item => {
          return {
            categoryId: item.categoryId,
            categoryName: item.categoryName,
            sort: item.sort,
            commodityId: item.commodityId,
            commodityName: item.commodityName,
            productPicture: item.productPicture,
            number: item.number,
            unit: item.unit,
            remark: item.remark
          }
        })
        let data = {
          areaId: this.areaId,
          areaName: this.areaName,
          commodityRecordRelations: this.list,
          remark: this.remark
        }
        CommodityAPI.saveCommodity(data).then(res => {
          if (res.code !== 200) {
            showToast({
              title: res.msg
            })

          } else {
            showToast({
              title: '下单成功'
            })
            uni.removeStorageSync("chooseList")

            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/mine/mine',
              })
            }, 1000);
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto; /* 居中 */
}

.for-view {
  margin-top: 20rpx;
  width: 98%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 加一个边框 以及阴影
  border-radius: 10rpx;
  box-shadow: 0 3rpx 16rpx 1rpx rgba(204, 204, 204, 0.5);
}

.for-item {
  margin-top: 6rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 166rpx;
  border-radius: 10rpx;
  box-shadow: 0 3rpx 16rpx 1rpx rgba(204, 204, 204, 0.5);

  .img {
    margin-top: 10rpx;
    width: 20vw;
  }
}

.item-info {
  display: flex;
  width: 70vw;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 120rpx;
}

.commodity-and-number {
  margin-top: 10rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .commodity-name {
    flex: 1; /* 使 commodity-name 占据剩余空间 */
  }

  .number-box {
    margin-left: auto; /* 将 number-box 推到右侧 */
    .minus {
      width: 22px;
      height: 22px;
      border-width: 1px;
      border-color: #E6E6E6;
      border-style: solid;
      border-radius: 100px;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      justify-content: center;
      align-items: center;
    }

    .input {
      width: 40px;
      text-align: center;
      margin: 4rpx;
    }

    .plus {
      width: 22px;
      height: 22px;
      background-color: #16141D;
      border-radius: 50%;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      justify-content: center;
      align-items: center;
    }
  }
}

.remark-add-del {
  margin-top: 10rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .remark {
    flex: 1; /* 使 commodity-name 占据剩余空间 */
    font-size: 24rpx;
    width: 75vw;
    color: #707070;
    border: 1px solid #E6E6E6;
    border-radius: 10rpx;
  }

  .del {
    width: 20vw;
    margin-left: auto; /* 将 number-box 推到右侧 */
  }
}

.remark-view {
  border-radius: 10rpx;
  width: 98%;
  margin: 20rpx;
  box-shadow: 0 3rpx 16rpx 1rpx rgba(204, 204, 204, 0.5);

  .textarea {
    margin: 30rpx;
    height: 200rpx;
    font-size: 26rpx;
    color: #707070;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 160rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .button {
    width: 686rpx;
    height: 92rpx;
    background: $custom-btn-color;
    box-shadow: 0 5rpx 13rpx 1rpx rgba(67, 119, 236, 0.44);
    border-radius: 46rpx;
    line-height: 92rpx;
    text-align: center;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
  }
}
</style>